<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue';

const mouse = reactive({ x: 0, y: 0 });
const mouseMove = (e) => {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
};
onMounted(() => {
  document.addEventListener('mousemove', mouseMove);
});
onUnmounted(() => {
  document.removeEventListener('mousemove', mouseMove);
});

const count = ref(0);
const add = () => {
  count.value++;
};
</script>

<template>
  <!-- vue2中只能有一个 根节点，vue3可以有多个 -->
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>
